<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Carousel Widget: Spotlight Example</title>
        <!-- Some basic styles for all examples -->
        <link type="text/css" rel="stylesheet" href="css/common.css">
        <!-- Style the container, and set dimensions for the list items -->
        <link type="text/css" rel="stylesheet" href="css/carousel.css">
        <!-- Dependencies -->
        <link type="text/css" rel="stylesheet"
              href="../../build/logger/assets/skins/sam/logger.css">
        <link type="text/css" rel="stylesheet"
              href="../../build/carousel/assets/skins/sam/carousel.css">
        <script src="../../build/yahoo/yahoo-debug.js"></script>
        <script src="../../build/dom/dom-debug.js"></script>
        <script src="../../build/event/event-debug.js"></script>
        <script src="../../build/logger/logger-debug.js"></script>
        <script src="../../build/animation/animation-debug.js"></script>
        <script src="../../build/element/element-beta-debug.js"></script>
        <script src="../../build/carousel/carousel-beta-debug.js"></script>
        <!-- Styles specific for this example only. -->
        <style type="text/css">
            /* Style the spotlight container */
            #spotlight {
                border: 1px solid #ccc;
                height: 180px;
                margin: 10px auto;
                padding: 1px;
                width: 240px;
            }

            #container {
                margin: 0 auto;
            }

            .yui-carousel-element li {
                height: 75px;
                opacity: 0.6;
                width: 75px;
            }

            .yui-carousel-element .yui-carousel-item-selected {
                opacity: 1;
            }
        </style>
        <script>
            (function () {
                var myLogReader, carousel;
                
                // Get the image link from within its (parent) container.
                function getImage(parent) {
                    var el = parent.firstChild;
                    
                    while (el) { // walk through till as long as there's an element
                        if (el.nodeName.toUpperCase() == "IMG") { // found an image
                            // flickr uses "_s" suffix for small, and "_m" for big
                            // images respectively
                            return el.src.replace(/_s\.jpg$/, "_m.jpg");
                        }
                        el = el.nextSibling;
                    }
                    
                    return "";
                }
                
                YAHOO.util.Event.onDOMReady(function (ev) {
                    var el, item,
                        myLogReader = new YAHOO.widget.LogReader(),
                        spotlight   = YAHOO.util.Dom.get("spotlight"),
                        carousel    = new YAHOO.widget.Carousel("container", {
                                numVisible: 2
                        });
                        
                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                    
                    carousel.addItem("<img src='http://farm1.static.flickr.com/79/214073568_f16d1ffce7_s.jpg'>");
                    carousel.addItem("<img src='http://farm1.static.flickr.com/40/214075243_ea66c4cb31_s.jpg'>");
                    carousel.addItem("<img src='http://farm1.static.flickr.com/69/213130158_0d1aa23576_s.jpg'>");
                    carousel.addItem("<img src='http://farm1.static.flickr.com/81/214076446_18fe6a6c91_s.jpg'>");
                    // display the first selected item in the spotlight
                    item = carousel.getElementForItem(
                            carousel.get("selectedItem"));
                    if (item) {
                        spotlight.innerHTML = "<img src=\"" +
                                getImage(item) + "\">";
                    }
                       
                    carousel.on("itemSelected", function (index) {
                        // item has the reference to the Carousel's item
                        item = carousel.getElementForItem(index);

                        if (item) {
                            spotlight.innerHTML = "<img src=\""
                                    + getImage(item) + "\">";
                        }
                    });
                });
            })();
        </script>
    </head>
    <body class="yui-skin-sam">
                    <!-- The Carousel container -->
                    <div id="container">
                    </div>
                    <!-- The spotlight container -->
                    <div id="spotlight"></div>
                    </div>
    </body>
</html>
